<template>
  <div class="proMeg">
    <gl-breadcrumb class="mb15"
                   text="产品二维码管理"></gl-breadcrumb>
    <div class="proMeg_main">
      <div class="proMeg_main_nav">
        <el-input class="mr20"
                  v-model="proName"
                  style="width:200px"
                  placeholder="请输入产品名称"></el-input>
        <div>
          <el-button type="primary"
                     icon="el-icon-search"
                     @click="getList">
            搜索
          </el-button>
          <el-button type="primary"
                     icon="el-icon-plus"
                     @click="add">
            新建
          </el-button>
        </div>
      </div>
      <div class="proMeg_main_box">
        <gl-table @button="buttonClick"
                  :data="data"
                  class="gl-table"
                  :columns="columns">
          <div class="terminal"
               slot="terminal"
               slot-scope="scope">
            <a :href="scope.row.android_download"
               v-if="scope.row.android_download.length>10">
              <img src="../../../assets/images/admin/android_icon_g.png">
            </a>
            <a :href="scope.row.iphone_download"
               v-if="scope.row.iphone_download.length>10">
              <img src="../../../assets/images/admin/ios_icon_g.png">
            </a>
            <p v-if="scope.row.android_download.length<10 && scope.row.iphone_download.length<10">暂无数据</p>
          </div>
        </gl-table>
        <gl-pagination :curr="curr"
                       :size="pageSize"
                       :total="total"
                       @callback="currChange"></gl-pagination>
      </div>
    </div>
    <Gldelbtn :show="showDel"
              :text="dialogText"
              @cancel="closeDel"
              @determine='defineCallback'></Gldelbtn>
    <el-dialog :title="dialogTitle"
               :visible.sync="dialogVis"
               :before-close="handleClose">
      <gl-form :form="form"
               :form-label="formLabel"
               :must="must"
               ref='form'
               :rule='rule'
               @change="formSelectChange"
               @upload="getPath">
      </gl-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVis = false">取 消</el-button>
        <el-button type="primary"
                   @click="Submission">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 二维码弹窗 -->
    <el-dialog :visible.sync="isQrcode"
               width="20%"
               title="二维码"
               center>
      <div class="tac">
        <img :src="qrcode"
             class="w90">
        <div class="tal address">链接：{{address}}</div>
        <el-button type="primary"
                   @click="isQrcode = false"
                   class="mt20">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'proQRcodeMeg',
  data() {
    return {
      clientList: [], //客户下拉列表
      clientId: '',
      statusList: [], //状态列表
      status: '',
      proName: '',

      data: [],
      columns: [
        { label: 'ID', prop: 'id' },
        {
          label: 'icon',
          prop: 'all_icon',
          type: 'image',
          class: 'icon'
        },
        { label: '产品二维码名称', prop: 'name' },
        {
          label: '背景',
          prop: 'all_bigimg',
          type: 'image',
          class: 'bgImg'
        },
        { label: '终端', prop: '', slot: 'terminal' },
        { label: '操作', btns: ['编辑', '二维码', '删除'], class: 'btn' }
      ],
      curr: 1,
      pageSize: 10,
      total: 0,
      dialogVis: false,
      dialogTitle: '',
      form: {
        customer_id: '',
        product_id: '',
        name: '',
        all_icon: '',
        all_bigimg: '',
        remark: '',
        android_download: '',
        iphone_download: ''
      },
      formLabel: [
        {
          label: '选择客户：',
          prop: 'customer_id',
          placeholder: '请选择',
          options: []
        },
        {
          label: '选择产品：',
          prop: 'product_id',
          placeholder: '请选择',
          options: []
        },
        { label: '二维码名称：', prop: 'name', placeholder: '请输入' },
        {
          label: 'icon：',
          prop: 'all_icon',
          type: 'upload',
          limit: 1,
          placeholder: '请输入'
        },
        { label: '背景图：', prop: 'all_bigimg', type: 'upload', limit: 1 },
        {
          label: '产品描述：',
          prop: 'remark',
          type: 'textarea',
          placeholder: '请输入',
          text: 'ueditor'
        },
        {
          label: '安卓下载链接：',
          prop: 'android_download',
          placeholder: '请输入'
        },
        {
          label: '苹果下载链接：',
          prop: 'iphone_download',
          placeholder: '请输入'
        }
      ],
      must: ['name', 'all_icon', 'all_bigimg'],
      showDel: false,
      dialogText: '',
      num: '',
      id: '',
      icon: '',
      bigimg: '',
      isQrcode: false,
      qrcode: '', // 二维码图片
      address: '' // 二维码链接
    }
  },
  watch: {
    proName() {
      if (!this.proName) {
        this.curr = 1
        this.getQRcode()
      }
    },
    dialogVis(val) {
      if (!val) {
        this.$refs.form.resetFields()
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 获取二维码列表
    getQRcode() {
      this.http
        .$post(
          'admin/qrcode.api/get_list',
          {
            curr: this.curr,
            limits: this.pageSize,
            keyword: this.proName
          },
          { loading: true }
        )
        .then(res => {
          this.data = res.list
          this.total = res.total
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 确定
    Submission() {
      if (this.$refs.form.validate()) {
        if (this.num == 1) {
          this.subEdit()
        } else {
          this.subAdd()
        }
      }
    },
    // 新建
    subAdd() {
      let params = {
        customer_id: this.form.customer_id,
        product_id: this.form.product_id,
        name: this.form.name,
        icon: this.icon,
        bigimg: this.bigimg,
        android_download: this.form.android_download,
        iphone_download: this.form.iphone_download,
        remark: this.form.remark
      }
      this.http
        .$post('admin/qrcode.api/add', params)
        .then(res => {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.dialogVis = false
          this.getQRcode()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 编辑
    subEdit() {
      let params = {
        id: this.id,
        customer_id: this.form.customer_id,
        product_id: this.form.product_id,
        name: this.form.name,
        icon: this.icon,
        bigimg: this.bigimg,
        android_download: this.form.android_download,
        iphone_download: this.form.iphone_download,
        remark: this.form.remark
      }

      this.http
        .$post('admin/qrcode.api/edit', params)
        .then(res => {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.dialogVis = false
          this.getQRcode()
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 选择回调
    formSelectChange(val) {
      if (val.prop == 'customer_id') {
        this.getProduct(1)
      }
    },
    // 上传路径
    getPath(val, res) {
      if (res == 'all_icon') {
        this.icon = val.savepath
      } else {
        this.bigimg = val.savepath
      }
    },
    // 客户请求
    getCustomer() {
      this.http
        .$post('admin/customer.api/list_customers', {
          company_id: this.userInfo.company_id
        })
        .then(res => {
          res.map(val => {
            this.formLabel[0].options.push({
              label: val.name,
              value: val.id
            })
          })
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    // 产品请求
    getProduct(isChange) {
      this.http
        .$post('admin/product.api/get_list', {
          customer_id: this.form.customer_id,
          curr: 0,
          limits: 0
        })
        .then(res => {
          this.formLabel[1].options = []
          if (isChange) {
            if (this.form.product_id) {
              this.form.product_id = res.list[0].id
            }
          }
          res.list.map(val => {
            this.formLabel[1].options.push({
              label: val.name,
              value: val.id
            })
          })
        })
        .catch(err => {
          this.$message.error(err.msg)
        })
    },
    getList(curr, pageSize) {
      this.curr = 1
      this.getQRcode()
    },
    // 验证码确定
    defineCallback(code, vCode) {
      if (vCode == code) {
        this.http
          .$post('admin/qrcode.api/del', {
            id: this.id,
            del: 2
          })
          .then(res => {
            this.curr = 1
            this.getQRcode()
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          })
          .catch(err => {
            this.$message.error(err.msg)
          })
        this.showDel = false
      } else {
        this.$message.error('验证码不正确')
      }
    },
    closeDel() {
      this.showDel = false
    },
    // 操作判断
    buttonClick(obj) {
      this.id = obj.row.id
      if (obj.index * 1 === 2) {
        this.dialogText = obj.row.name
        this.showDel = true
      } else if (obj.index * 1 === 1) {
        // console.log('QR code')

        this.qrcode = obj.row.qrcode
        this.address = obj.row.address
        this.isQrcode = true
      } else {
        this.icon = obj.row.icon
        this.bigimg = obj.row.bigimg
        let new_form = Object.assign({}, obj.row)
        new_form.customer_id =
          new_form.customer_id == 0 ? '' : new_form.customer_id
        new_form.product_id =
          new_form.product_id == 0 ? '' : new_form.product_id
        this.form = new_form
        this.num = 1
        this.dialogTitle = '编辑产品二维码'
        this.dialogVis = true
        this.getProduct()
      }
    },
    currChange(obj) {
      this.curr = obj.curr
      this.pageSize = obj.size
      this.getQRcode()
    },
    // 新建按钮
    add() {
      this.num = ''
      this.form = {
        customer_id: '',
        product_id: '',
        name: '',
        all_icon: '',
        all_bigimg: '',
        remark: '',
        android_download: '',
        iphone_download: ''
      }
      this.formLabel[1].options = []
      this.dialogVis = true
      this.dialogTitle = '新增产品二维码'
    }
  },
  created() {
    this.getQRcode()
    this.getCustomer()
  }
}
</script>
<style lang="less" scoped>
/deep/.el-dialog__header {
  border-bottom: 1px solid #ddd;
}

.gl-table {
  /deep/ .bgImg {
    width: 68px;
    height: 68px;
  }
  /deep/ .icon {
    width: 68px;
    height: 68px;
  }
}
.proMeg {
  .proMeg_tit {
    padding: 15px 0 15px 25px;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .proMeg_main {
    padding: 20px 25px;
    background-color: #fff;
    .proMeg_main_nav {
      display: flex;
    }
    .proMeg_main_box {
      margin-top: 20px;
      /deep/ .el-table .cell {
        .el-button--text {
          &.btn {
            margin: 0;
            span {
              padding: 0 5px;
              border-right: 1px solid #66b1ff;
            }
            &:last-child {
              span {
                border-right: none;
              }
            }
          }
        }
      }
    }
  }
}
.terminal {
  a:last-child {
    padding-left: 10px;
  }
}
.address {
  word-break: break-all;
}
</style>